<template>
  <div class="last-play-container">
    <div class="last-play-header">
      <h2>最近播放</h2>
      <span>共{{ lastPlayListReady.length }}首</span>
      <div class="clear-list" @click="clearLastPlayList">清空列表</div>
      <div class="play-all" @click="open">
        <i class="el-icon-caret-right"></i>
        <span>播放全部</span>
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <div class="last-play-body">
      <el-table :data="lastPlayListReady" stripe style="width: 100%">
        <el-table-column prop="name" label="音乐标题" min-width="50%" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="display: inline-block; width: 100%" @click="chooseSong(scope.row.id)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="artist" label="歌手" min-width="20%" show-overflow-tooltip></el-table-column>
        <el-table-column prop="playTime" label="播放时间" min-width="20%">
          <template slot-scope="scope"> {{ scope.row.playTime | conversion(scope.row.type) }}{{ scope.row.msg }}</template>
        </el-table-column>
        <el-table-column prop="delete" label="删除" min-width="10%">
          <template slot-scope="scope">
            <div class="el-icon-delete" style="font-size: 16px; cursor: pointer" @click="deleteLastPlayList(scope.row)"></div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { savePlayList, clearPlayList, loadLastPlayList, deleteLastPlayList, clearLastPlayList } from '@/js/cache'
import bus from '@/components/eventBus.js'
export default {
  name: 'LastPlay',
  data() {
    return {
      lastPlayList: [],
      nowTime: 0,
      lastPlayListReady: [],
      // 传入歌曲 id ，根据 id 变化来判断新播放行为的产生
      songId: ''
    }
  },
  created() {
    bus.$on('songId', (val) => {
      this.songId = val
    })
  },
  mounted() {
    this.lastPlayList = loadLastPlayList()
    this.nowTime = Date.parse(new Date())
    this.initLastPlayTimeMsg()
  },
  methods: {
    initLastPlayTimeMsg() {
      const arr = []
      this.lastPlayList.forEach((item) => {
        let val = this.nowTime - item.playTime
        let type = null
        let msg = ''
        if (val >= 86400000) {
          // 大于等于一天
          type = 'yyyy-MM-dd'
          msg = ''
        } else if (val >= 3600000) {
          // 大于等于一小时
          type = 'h'
          msg = '小时前'
        } else if (val >= 60000) {
          // 大于等于一分钟
          type = 'm'
          msg = '分钟前'
        } else {
          type = 's'
          msg = '秒前'
        }
        let obj = {
          id: item.id,
          name: item.name,
          artist: item.artist,
          playTime: val,
          type: type,
          msg: msg
        }
        arr.push(obj)
      })
      this.lastPlayListReady = arr
    },
    deleteLastPlayList(item) {
      deleteLastPlayList(item)
      this.lastPlayList = loadLastPlayList()
      this.initLastPlayTimeMsg()
    },
    clearLastPlayList() {
      clearLastPlayList()
      this.lastPlayList = loadLastPlayList()
      this.initLastPlayTimeMsg()
    },
    chooseSong(id) {
      bus.$emit('songId', id)
    },
    open() {
      this.$confirm('"播放全部"将会替换当前的播放列表，是否继续？', '替换播放列表', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        lockScroll: false
      })
        .then(() => {
          // 执行替换当前的播放列表的操作
          // 清空当前播放列表
          clearPlayList()
          // 准备新的列表数据，存入播放列表中
          this.lastPlayList.forEach((item) => {
            let obj = {
              id: item.id,
              name: item.name,
              artist: item.artist,
              time: item.time
            }
            savePlayList(obj)
          })
          // 重新渲染播放列表数据
          bus.$emit('initPlayList')
        })
        .catch(() => {
          // console.log('取消')
        })
    }
  },
  watch: {
    songId() {
      setTimeout(() => {
        this.lastPlayList = loadLastPlayList()
        this.nowTime = Date.parse(new Date())
        this.initLastPlayTimeMsg()
      }, 120)
    }
  }
}
</script>

<style lang="less" scoped>
.last-play-container {
  .last-play-header {
    margin-top: 20px;
    text-align: left;
    h2 {
      display: inline;
      margin-left: 20px;
      font-size: 20px;
    }
    span {
      margin-left: 15px;
      color: #9f9f9f;
    }
    .clear-list {
      float: right;
      display: inline;
      margin-right: 20px;
      font-size: 17px;
      color: #507daf;
      cursor: pointer;
      &:hover {
        color: #0b58b0;
      }
    }
    .play-all {
      position: relative;
      margin-top: 25px;
      margin-left: 20px;
      width: 140px;
      height: 32.5px;
      line-height: 32.5px;
      background-color: #ec4141;
      text-align: center;
      border-radius: 16.25px;
      cursor: pointer;
      &:hover {
        background-color: #cc3232;
      }
      .el-icon-caret-right {
        position: absolute;
        top: 50%;
        margin-top: -12px;
        left: 10px;
        font-size: 24px;
        color: #fff;
      }
      span {
        margin: 0;
        font-size: 17px;
        color: #fff;
      }
      .el-icon-plus {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 10px;
        font-size: 16px;
        color: #fef4f4;
      }
    }
  }
  .last-play-body {
    margin-top: 10px;
    /deep/.el-table__cell {
      padding: 9px 0;
      font-size: 12px;
    }
  }
}
</style>
